<template>
    <div class="merchantOrderList">
        <van-sticky>
            <van-tabs v-model="active" @change="changeTabs">
                <van-tab name="2" title="待发货"></van-tab>
                <van-tab name="6" title="已发货"></van-tab>
                <van-tab name="4" title="已完成"></van-tab>
            </van-tabs>
        </van-sticky>
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="content">
                <van-skeleton title :row="3" :loading="loading">
                    <div class="goodslist" v-if="list.length>0">
                        <div class="item" v-for="item of list" :key="item.order_code">
                            <div v-for="(it,index) in item.guageList" :key="it.id">
                                <van-card 
                                    :price="it.price" 
                                    :title="it.order_code" 
                                    :desc="it.name" 
                                    :thumb="it.url" 
                                    :num="it.order_num"
                                    @click="goodsClick(index)"
                                >
                                    <template #tags v-if="item.guageList.length-1 === index">
                                        <van-tag plain type="danger" v-if="item.guageList[0].payment_status == 1">待付款</van-tag>
                                        <van-tag plain type="danger" v-else-if="item.guageList[0].shipping_status == 2">待发货</van-tag>
                                        <van-tag plain type="danger" v-else>已发货</van-tag>
                                    </template>
                                    <template #footer v-if="item.guageList.length-1 === index">
                                        <div class="btn" @click.stop="">
                                            合计￥{{ item.subtotal }}
                                        </div>
                                    </template>
                                </van-card>
                            </div>
                        </div>
                    </div>
                    <van-empty v-else description="暂无订单" />
                </van-skeleton>
            </div>
        </van-pull-refresh>
        <van-tabbar route active-color="#ee0a24">
            <van-tabbar-item to="/" icon="shop-o">首页</van-tabbar-item>
            <van-tabbar-item to="/goodstypelist" icon="apps-o">全部分类</van-tabbar-item>
            <van-tabbar-item to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="/center" icon="manager-o">会员中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            active:'2',
            isLoading:false,
            loading:true,
            list: [],
        }
    },
    computed: {
        ...mapState(['openid']),
        apiUrl() {
            return this.status != 'all' ? this.$api.merchantHair : ''
        },
        orderState() {
            let obj = {}
            switch (this.active){
            case '1':
                obj.payment_status = 1
                break
            case '2':
                obj.shipping_status = 2
                obj.payment_status = 2
                break
            case '6':
                obj.shipping_status = 6
                break
            case '4':
                obj.shipping_status = 4
            }
            return obj
        }
    },
    mounted(){
        this.getList()
    },
    methods:{
        //点击商品
        goodsClick(e){
            console.log(this.list[e])
            this.$router.push({ path: `/center/merchantCenter/merchantOrderDetail/${this.list[e].order_code}` })
        },
        //切换tabs
        changeTabs(){
            this.getList()
        },
        //下拉刷新
        onRefresh(){
            this.getList()
            this.isLoading = false
        },
        //获取列表
        async getList() {
            this.loading = true
            let { data: { code, data } } = await this.$http.get(this.apiUrl,{
                openid: this.openid,
                ...this.orderState
            })
            this.loading = false
            if (code === 0) {
                this.list = data.subtotal.map((item, index) => {
                    item.guageList = data.items[index]
                    return item
                })
            } else {
            this.list = []
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .merchantOrderList{
        .content{
            height: calc(100vh - 94px);
            .van-skeleton__title{
                margin-top: 2rem;
            }
            .van-skeleton__row, .van-skeleton__title{
                background-color: #fff;
            }
        }
    }
</style>